<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习1：侧边栏渐入渐出</title>
    <!-- <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        /* 主内容区样式 */
        .main-content {
            padding: 2rem;
        }

        .open-btn {
            padding: 0.8rem 1.5rem;
            background-color: #2563eb;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: background-color 0.3s;
        }

        .open-btn:hover {
            background-color: #1d4ed8;
        }

        .main-title {
            margin-top: 2rem;
            font-size: 1.8rem;
            color: #333;
        }

        /* 侧边栏样式 */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 260px;
            height: 100vh;
            background-color: white;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
            /* 初始隐藏：向左偏移自身宽度 */
            transform: translateX(-100%);
            /* 平滑过渡 */
            transition: transform 0.3s ease;
        }

        .sidebar-header {
            padding: 1.2rem 1.5rem;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .sidebar-title {
            font-size: 1.2rem;
            color: #333;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 1.2rem;
            color: #666;
            cursor: pointer;
            transition: color 0.3s;
        }

        .close-btn:hover {
            color: #000;
        }

        .sidebar-menu {
            padding: 1.5rem;
            list-style: none;
        }

        .sidebar-menu li {
            margin-bottom: 1rem;
        }

        .sidebar-menu a {
            text-decoration: none;
            color: #333;
            font-size: 1rem;
            transition: color 0.3s;
        }

        .sidebar-menu a:hover {
            color: #2563eb;
        }

        /* 遮罩层样式 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 90;
            /* 初始隐藏：透明且不可点击 */
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        /* 激活状态：显示侧边栏和遮罩 */
        .sidebar.active {
            transform: translateX(0);
        }

        .overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        /* 防止背景滚动 */
        body.no-scroll {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- 主内容区 -->
    <div class="main-content">
        <button class="open-btn" id="openSidebar">
            <i class="fa fa-bars"></i> 打开侧边栏
        </button>
        <h1 class="main-title">主内容区域</h1>
    </div>

    <!-- 侧边栏 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h2 class="sidebar-title">侧边导航</h2>
            <button class="close-btn" id="closeSidebar">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <ul class="sidebar-menu">
            <li><a href="#"><i class="fa fa-home mr-2"></i> 首页</a></li>
            <li><a href="#"><i class="fa fa-shopping-bag mr-2"></i> 商品列表</a></li>
            <li><a href="#"><i class="fa fa-user mr-2"></i> 个人中心</a></li>
            <li><a href="#"><i class="fa fa-cog mr-2"></i> 设置</a></li>
            <li><a href="#"><i class="fa fa-question-circle mr-2"></i> 帮助中心</a></li>
        </ul>
    </div>

    <!-- 遮罩层 -->
    <div class="overlay" id="overlay"></div>

    <script>
        // 1. 获取DOM元素
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('overlay');
        const openBtn = document.getElementById('openSidebar');
        const closeBtn = document.getElementById('closeSidebar');
        const body = document.body;

        // 2. 打开侧边栏函数
        function openSidebar() {
            sidebar.classList.add('active');
            overlay.classList.add('active');
            body.classList.add('no-scroll'); // 禁止背景滚动
        }

        // 3. 关闭侧边栏函数
        function closeSidebar() {
            sidebar.classList.remove('active');
            overlay.classList.remove('active');
            body.classList.remove('no-scroll'); // 恢复背景滚动
        }

        // 4. 绑定事件
        openBtn.addEventListener('click', openSidebar); // 点击打开按钮
        closeBtn.addEventListener('click', closeSidebar); // 点击关闭按钮
        overlay.addEventListener('click', closeSidebar); // 点击遮罩层

        // 5. ESC键关闭侧边栏
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && sidebar.classList.contains('active')) {
                closeSidebar();
            }
        });
    </script>
</body>
</html>